<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
      <el-breadcrumb-item>合同列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入合同名:" clearable v-model="contract" @clear="searchContract">
            <el-button slot="append" icon="el-icon-search" @click="searchContract"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="contractList" border stripe>
        <el-table-column label="合同名" prop="contract"></el-table-column>
        <el-table-column label="订单号" prop="orderId"></el-table-column>
        <el-table-column label="上传时间" prop="insertTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="downLoadContract(scope.row.contract)">下载合同</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <div style="margin-top: 300px;margin-left: 400px">版权所有 © 2022 市场/摊位管理系统，并保留所有权利。</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      contract: "",
      contractList: [],
      total: 0,
    };
  },
  methods: {
    downLoadContract(contract){
      let url=this.$Url.imgUrl+'contract/'+contract;
      window.location.href = url;
    },
    searchContract(){
      this.initContract();
    },
    initContract(){
      let url = "/rentOrder/contractList";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          contract:this.contract
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.contractList = res.data.data.list ;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum ;
          this.total = res.data.data.total ;
        }else {
          this.$message({
            type:'error',
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.initContract();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initContract();
    },


  },
  created() {
    this.initContract();
  }
};
</script>
<style lang="less" scoped>
</style>